<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta name="format-detection"content="telephone=no">
<title></title>
</head>

<style>
.circle {
        background-color: rgba(0,0,0,0);
        border:5px solid rgba(0,183,229,0.9);
        opacity:0.9;
        border-right:5px solid rgba(0,0,0,0);
        border-left:5px solid rgba(0,0,0,0);
        border-radius:50px;
        box-shadow: 0 0 35px #2187e7;
        width:50px;
        height:50px;
        margin:0 auto;
        -moz-animation:spinPulse 1s infinite ease-in-out;
        -webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
        background-color: rgba(0,0,0,0);
        border:5px solid rgba(0,183,229,0.9);
        opacity:.9;
        border-left:5px solid rgba(0,0,0,0);
        border-right:5px solid rgba(0,0,0,0);
        border-radius:50px;
        box-shadow: 0 0 15px #2187e7;
        width:30px;
        height:30px;
        margin:0 auto;
        position:relative;
        top:-50px;
        -moz-animation:spinoffPulse 1s infinite linear;
        -webkit-animation:spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse {
        0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
        50% { -moz-transform:rotate(145deg); opacity:1; }
        100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
        0% { -moz-transform:rotate(0deg); }
        100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
        0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
        50% { -webkit-transform:rotate(145deg); opacity:1;}
        100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
        0% { -webkit-transform:rotate(0deg); }
        100% { -webkit-transform:rotate(360deg); }
}
/**/
    @-webkit-keyframes twinkling{        /*透明度由0到1*/
0%{
opacity:0;        /*透明度为0*/
}
100%{
opacity:1;        /*透明度为1*/
}
}

.info{
-webkit-animation: twinkling 1s infinite ease-in-out;
}
.info{
        position:absolute;
top:400px;
left:50%;
margin-left:-20px;
width:40px;
height:30px;
z-index:99999;
}
.pos_abs {position:absolute; z-index:1;}
#prebox{width:100%;min-height:480px;position:relative;}
.loading{width:100%;top:50%;margin-top:-100px; text-align:center; font-size:12px; color:#09F; font-size:12px; line-height:20px;}
.loading strong{font-size:14px; font-weight:bold;}

.login{ background:#000; width:100%; height:100%; position:relative;}
#logo{width:36%; position:absolute; left:50%; bottom:7%; margin-left:-18%; z-index:999}
*{margin:0;}
html,body,p,div,img,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,input{margin:0;padding:0;}
ul,li{list-style:none}
select,input,img{vertical-align:middle}
body,form{font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; color:#333;-webkit-text-size-adjust:none;}
body{font-size:14px;line-height:1.6em;}
img{border:0; width:100%;}
a:link,a:visited{ color:#000; text-decoration: none;}
a:hover{ color: #000; text-decoration:none;}
a{-webkit-tap-highlight-color:rgba(255,0,0,0);}
:focus{outline:none;}
input,textarea{padding:0;margin:0;border:0}
input{-webkit-text-size-adjust:none; outline:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
input[type="text"],input[type="password"],input[type="button"],input[type="submit"],textarea{-webkit-appearance:none;appearance:none; font: 16px/1 Tahoma,Helvetica,Arial,"Microsoft YaHei","\5b8b\4f53",sans-serif;}
html,body{width:100%; height: 100%; overflow: hidden;}
#canvas{width:100%; height:100%; position:relative; min-width:320px; overflow:hidden;}
#mod{position:absolute; width:100%; height:100%; top:0; left:0; background:url(//hunan.sinaimg.cn/2014/1113/U7070P1192DT20141113164744.jpg) repeat;background-size:100%; }
#mod .zongye{ width:100%; height:100%;}


#xiangshang{width:30px; position:absolute; left:50%; margin-left:-5%; bottom:1%; z-index:999; text-align:center; padding:1px 5px; -webkit-border-radius:50%; border-radius:50%; z-index:999999}
#xiangshang img{animation:xsdong 1s infinite; -webkit-animation:xsdong 1s infinite; position:relative;}
@-webkit-keyframes xsdong{0%{top:5px;opacity:1;}100%{top:-5px;opacity:0.3;}}


#xiangxia{width:30px; position:absolute; left:50%; margin-left:-5%; top:1%; z-index:999; text-align:center;  padding:1px 5px; -webkit-border-radius:50%; border-radius:50%; display:none; z-index:999999}
#xiangxia img{animation:xsdong 1s infinite; -webkit-animation:xsdong 1s infinite; position:relative;}
//这里放背景图 大小640*1136
.di_00{ background:url(images/1.jpg) repeat; position:relative; background-size:100%;}
.di_01{ background:url(images/12.jpg) repeat; position:relative; background-size:100%;}
.di_02{ background:url(images/13.jpg) repeat; position:relative; background-size:100%;}
.di_03{ background:url(images/14.jpg) repeat; position:relative; background-size:100%;}
.di_04{ background:url(images/15.jpg) repeat; position:relative; background-size:100%;}
.di_05{ background:url(images/16.jpg) repeat; position:relative; background-size:100%;}
</style>
<!-- 预加载style end -->
<body>
<div class="login">
   <div id="prebox">
        <div class="pos_abs loading">
            <div class="circle"></div>
            <div class="circle1"></div>
        <p><strong></strong></p>
        <p>等待一下...</p>
    </div>
</div>
</div>

<div id="canvas">
            <div id="mod">
            <div class="zongye di_00">
       //第一屏  可以放东西在里面显示
              <div class="info"><img src="//hunan.sinaimg.cn/lab/H5/S127438T1411089500137.png" width="40px" height="30px" ></div>
            </div>

            <div class="zongye di_01">
             <div class="info"><img src="//hunan.sinaimg.cn/lab/H5/S127438T1411089500137.png" width="40px" height="30px" ></div>
            </div>
            <div class="zongye di_02">
               <div class="info"><img src="//hunan.sinaimg.cn/lab/H5/S127438T1411089500137.png" width="40px" height="30px" ></div>
            </div>
            <div class="zongye di_03">
                           <div class="info"><img src="//hunan.sinaimg.cn/lab/H5/S127438T1411089500137.png" width="40px" height="30px" ></div>

            </div>
             <div class="zongye di_04">
                            <div class="info"><img src="//hunan.sinaimg.cn/lab/H5/S127438T1411089500137.png" width="40px" height="30px" ></div>

            </div>
             <div class="zongye di_05">
            </div>


        </div>
</div>

<script type="text/javascript">
document.onreadystatechange = subSomething;
function subSomething(){
  if(document.readyState == "complete"){
          setTimeout(function(){
      $(".login").hide();
  },1500);
  }
}
$(function() {
  var startX, startY, endX, endY=0;
  var showADID = 0;
  var rl=1;
  document.getElementById("canvas").addEventListener("touchstart", touchStart, false);
  document.getElementById("canvas").addEventListener("touchmove", touchMove, false);
  document.getElementById("canvas").addEventListener("touchend", touchEnd, false);
  function touchStart(event) {
          var touch = event.touches[0];
          startY = touch.pageY;
          startX = touch.pageX;
  }
  function touchMove(event) {
          event.preventDefault();
          var touch = event.touches[0];
          endY = touch.pageY;
          endX = touch.pageX;
  }
  function touchEnd(event) {
          if(!endY=="0"){
                  if((startY-endY)>50){

                                           showADID++;


                  }else if((startY-endY)<-50){
                          showADID--;
                  }
                  if(showADID<0){
                          showADID=0;
                  }
                  if(showADID>5){
                          showADID=5;
                  }
                  endY=0;
          }
          //$("#mod").animate({top: '-'+showADID+'00%'}, "slow");
          pd();
  }
  function pd(){
                  var myTimeline = new TimelineLite();
                  myTimeline.to("#mod",0.5,{top: '-'+showADID+'00%'});

          }
})
//微信分享
  function onBridgeReady(){
  //发送给好友
  WeixinJSBridge.on('menu:share:appmessage', function(argv){
                  WeixinJSBridge.invoke('sendAppMessage',{
                  "appid":"",                                                                         //appid 设置空就好了。
                  "img_url":"",                                                                        //分享时所带的图片路径
                  "img_width":"140",                                                                 //图片宽度
                  "img_height":"120",                                                         //图片高度
                  "link":window.location.href,                                         //分享附带链接地址
                  "desc":"",                         //分享内容介绍
                  "title":""
                  }, function(res){});
          });

  //分享好友圈
  WeixinJSBridge.on('menu:share:timeline', function(argv){
                  WeixinJSBridge.invoke('shareTimeline',{
                  "appid":"",                                                                         //appid 设置空就好了。
                  "img_url":"",                                                                        //分享时所带的图片路径
                  "img_width":"140",                                                                 //图片宽度
                  "img_height":"120",                                                         //图片高度
                  "link":window.location.href,                        //分享附带链接地址
                  "desc":"",                         //分享内容介绍
                  "title":""
                  }, function(res){});
          });

  }

  //WeixinJSBridge 事件绑定
  if (typeof WeixinJSBridge == "undefined"){
      if( document.addEventListener ){
          document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
      }else if (document.attachEvent){
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
      }
  }else{
      onBridgeReady();
  }


</script>

</body>
</html>
